<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles/index.css" />
    <title>Document</title>
  </head>

  <body>
    <div id="app" class="score-case">
      <div class="table">
        <table>
          <thead>
            <tr>
              <th>姓名</th>
              <th>科目</th>
              <th>成绩</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr>
            <td>1</td>
            <td>语文</td>
            <td class="red">46</td>
            <td><a href="#">删除</a></td>
          </tr>
          --></tbody>

          <tfoot>
            <tr>
              <td colspan="5">
                <span class="total">总分：246</span>
                <span style="margin-left: 50px" class="average"
                  >平均分：79</span
                >
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="form">
        <div class="form-item">
          <div class="label">姓名：</div>
          <div class="input">
            <input type="text" placeholder="请输入姓名" class="username" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">科目：</div>
          <div class="input">
            <input type="text" placeholder="请输入科目" class="subject" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">分数：</div>
          <div class="input">
            <input type="text" placeholder="请输入分数" class="score" />
          </div>
        </div>
        <div class="form-item">
          <div class="label"></div>
          <div class="input">
            <button class="submit">添加</button>
          </div>
        </div>
      </div>
    </div>

    <script>
      const list = [
        { name: "古丽扎娜", subject: "语文", score: 20 },
        { name: "佟丽丫丫", subject: "数学", score: 99 },
        { name: "马尔扎哈", subject: "英语", score: 70 },
      ];
      const tbody = document.querySelector("tbody");
      const total = document.querySelector(".total");
      const average = document.querySelector(".average");
      function render() {
        let zongfen = 0;
        let str = "";
        list.forEach(function (e, index) {
          str += `<tr>
            <td>${e.name}</td>
            <td>${e.subject}</td>
            <td class="red">${e.score}</td>
            <td><a href="#" data-index="${index}">删除</a></td>
          </tr>`;
          zongfen += e.score;
        });
        tbody.innerHTML = str;
        total.innerHTML = `总分: ${zongfen}`;
        average.innerHTML = `平均分: ${zongfen / list.length}`;
      }
      render();
      let submit = document.querySelector(".submit");
      let name = document.querySelector(".username");
      let subject = document.querySelector(".subject");
      let score = document.querySelector(".score");
      submit.addEventListener("click", function () {
        if (!name.value || !subject.value || !score.value) {
          return alert("输入内容不能为空");
        }
        list.push =({
          name: name.value,
          subject: subject.value,
          score: +score.value,
        });
        render();
        name.value = "";
        subject.value = "";
        score.value = "";
      });

      tbody.addEventListener("click", function (e) {
        if (e.target.tagName === "A") {
          list.splice(e.target.dataset.index, 1);
          render();
        }
      });
    </script>
  </body>
</html>
